﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>othello</title>
    <style type="text/css">
        canvas {
            display: block;
            margin: 50px auto;
            box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500 " height="500"></canvas>
    <script type="text/javascript">
        var chess = document.getElementById("mycanvas");
        var context = chess.getContext("2d");
        var me = true;
        var n = 0;
        var chessBox = [];//存放棋盘位置的二维数组;
        for (var i = 0; i < 8; i++) {
            chessBox[i] = [];
            for (var j = 0; j < 8; j++) {
                chessBox[i][j] = 0;//初值为0;
            }
        }
        //绘制线条，形成8x8棋盘;
        function drawChessBoard() {
            for (var i = 0; i < 9; i++) {
                context.strokeStyle = "#D6D1D1";
                context.moveTo(10 + i * 60, 10);
                context.lineTo(10 + i * 60, 490);//（10，10）到（490，490），间隔为60px;
                context.stroke();
                context.moveTo(10, 10 + i * 60);
                context.lineTo(490, 10 + i * 60);
                context.stroke();
            }
        }
        drawChessBoard();
        //指定位置绘制棋子,k为true绘制黑棋,k为false绘制白子;
        function oneStep(i, j, k) {
            context.beginPath();
            context.arc(40 + i * 60, 40 + j * 60, 28, 0, 2 * Math.PI);
            var gradient = context.createRadialGradient(40 + i * 60, 40 + j * 60, 28, 40 + i * 60, 40 + j * 60, 0);
            if (k) {
                gradient.addColorStop(0, "#0A0A0A");//绘制黑棋;
                gradient.addColorStop(1, "#636766");
                chessBox[i][j] = 1;
            }
            else {
                gradient.addColorStop(0, "#D1D1D1");
                gradient.addColorStop(1, "#F9F9F9");
                chessBox[i][j] = 2;
                //绘制白棋;
            }
            context.fillStyle = gradient;
            context.fill();
            context.closePath();
        }
        //绘制提示信息;
        function drawPrompt(i, j) {
            context.beginPath();
            context.fillStyle = "blue";
            context.fillRect(35 + i * 60, 35 + j * 60, 10, 10);
            chessBox[i][j] = -1;//标记提示信息,在清除提示时用于检验;
            context.closePath();
            n++;
        }
        //绘制初始的四个棋子;
        function draw4() {
            oneStep(3, 3, true);
            oneStep(3, 4, false);
            oneStep(4, 3, false);
            oneStep(4, 4, true);
        }
        draw4();
        //统计两种颜色棋子,总计存在64个棋子时返回胜负信息;
        function totalChess() {
            var count1 = 0;
            var count2 = 0;
            for (var i = 0; i < 8; i++) {
                for (var j = 0; j < 8; j++) {
                    if (chessBox[i][j] == 1) count1++;
                    else if (chessBox[i][j] == 2) count2++;
                }
            }
            if (count1 + count2 == 64 && count1 > count2) {
                alert("黑方获胜");
            }
            else if (count1 + count2 == 64 && count1 < count2) {
                alert("白方获胜");
            }
            else if (count1 + count2 == 64 && count1 == count2) {
                alert("平局");
            }
        }
        //清除提示标记;
        function cleanPrompt() {
            for (var i = 0; i < 8; i++) {
                for (var j = 0; j < 8; j++) {
                    if (chessBox[i][j] == -1) {
                        chessBox[i][j] = 0;
                        context.beginPath();
                        context.arc(40 + i * 60, 40 + j * 60, 25, 0, 2 * Math.PI);//在提示处绘制半径30px的白色圆;
                        context.fillStyle = "white";
                        context.fill();
                        context.closePath();
                    }
                    else continue;
                }
            }
        }
        //判断当前处能否落子;
        function judgeChess(i, j) {
            var p = i;
            var q = j;//寄存当前位置,i,j作为变量;
            var l;
            if (me) {
                l = 1;
            } else { l = 2 };//用l寄存下一步要走的棋;
            //向左上方寻找;
            function jdgLeftUp(i, j) {
                if (chessBox[p][q] == -1) return;//若已经提示,则不再向下判断;
                else if (i == 0 || j == 0) return;//边界判断;
                else { i--; j--; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgLeftUp(i, j);//若为异色子,则递归,向下寻找同色子;
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;//末尾为空格则终止;
                else if (chessBox[i][j] == l) {
                    i++;
                    j++;
                    if (i < p && j < q) drawPrompt(p, q);//相邻的同色子不能提示;
                }
            }
            //向上方寻找;
            function jdgUp(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (j == 0) return;
                else { j--; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgUp(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    j++;
                    if (j < q) drawPrompt(p, q);
                }
            }
            //向右上方寻找;
            function jdgRightUp(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (i == 7 || j == 0) return;
                else { i++; j--; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgRightUp(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    i--;
                    j++;
                    if (i > p && j < q) drawPrompt(p, q);
                }
            }
            //向左边寻找;
            function jdgLeft(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (i == 0) return;
                else { i--; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgLeft(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    i++;
                    if (i < p) drawPrompt(p, q);
                }
            }
            //向右边寻找;
            function jdgRight(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (i == 7) return;
                else { i++; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgRight(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    i--;
                    if (i > p) drawPrompt(p, q);
                }
            }
            //向左下方寻找;
            function jdgLeftDown(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (i == 0 || j == 7) return;
                else { i--; j++; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgLeftDown(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    i++;
                    j--;
                    if (i < p && j > q) drawPrompt(p, q);
                }
            }
            //向下方寻找;
            function jdgDown(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (j == 7) return;
                else { j++; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgDown(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    j--;
                    if (j > q) drawPrompt(p, q);
                }
            }
            //向右下方寻找;
            function jdgRightDown(i, j) {
                if (chessBox[p][q] == -1) return;
                else if (i == 7 || j == 7) return;
                else { i++; j++; }
                if (chessBox[i][j] != l && chessBox[i][j] != -1 && chessBox[i][j])
                    jdgRightDown(i, j);
                else if (chessBox[i][j] == -1 || !chessBox[i][j]) return;
                else if (chessBox[i][j] == l) {
                    i--;
                    j--;
                    if (i > p && j > q) drawPrompt(p, q);
                }
            }
            jdgLeftUp(i, j);
            jdgUp(i, j);
            jdgRightUp(i, j);
            jdgLeft(i, j);
            jdgRight(i, j);
            jdgLeftDown(i, j);
            jdgDown(i, j);
            jdgRightDown(i, j);
        }
        //翻转棋子颜色,每下一步朝8个方向遍历;
        function changeChess(i, j) {
            var m = 0;//每次调用change（）函数累加其值;
            var l;
            if (me) {
                l = 1;
            } else l = 2;//先判定后渲染,l,p,q用于寄存点击的位置信息;
            var p = i;
            var q = j;//记录起点位置,用于比较异色还是同色棋子;
            //向左上方遍历;
            function changeChessLeftUp(i, j) {
                if (i == 0 || j == 0) return;//边界;
                else { i--; j--; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessLeftUp(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    i++;
                    j++;
                    while (i < p && j < q) {
                        change(i, j);//将中间的异色子变色;
                        i++;
                        j++;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向正上方遍历;
            function changeChessUp(i, j) {
                if (j == 0) return;//边界;
                else { j--; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessUp(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    j++;
                    while (j < q) {
                        change(i, j);//将中间的异色子变色;
                        j++;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向右上方遍历;
            function changeChessRightUp(i, j) {
                if (i == 7 || j == 0) return;//边界;
                else { j--; i++; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessRightUp(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    j++;
                    i--;
                    while (i > p && j < q) {
                        change(i, j);//将中间的异色子变色;
                        j++;
                        i--;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向正左遍历;
            function changeChessLeft(i, j) {
                if (i == 0) return;//边界;
                else { i--; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessLeft(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    i++;
                    while (i < p) {
                        change(i, j);//将中间的异色子变色;
                        i++;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向正右遍历;
            function changeChessRight(i, j) {
                if (i == 7) return;//边界;
                else { i++; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessRight(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    i--;
                    while (i > p) {
                        change(i, j);//将中间的异色子变色;
                        i--;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向左下方遍历;
            function changeChessLeftDown(i, j) {
                if (i == 0 || j == 7) return;//边界;
                else { j++; i--; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessLeftDown(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    j--;
                    i++;
                    while (i < p && j > q) {
                        change(i, j);//将中间的异色子变色;
                        j--;
                        i++;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向正下方遍历;
            function changeChessDown(i, j) {
                if (j == 7) return;//边界;
                else { j++; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessDown(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    j--;
                    while (j > q) {
                        change(i, j);//将中间的异色子变色;
                        j--;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //向右下方遍历;
            function changeChessRightDown(i, j) {
                if (i == 7 || j == 7) return;//边界;
                else { i++; j++; }
                if (chessBox[i][j] != l && chessBox[i][j])
                    changeChessRightDown(i, j);//递归，继续寻找直到末尾;
                else if (chessBox[i][j] == l) {
                    i--;
                    j--;
                    while (i > p && j > q) {
                        change(i, j);//将中间的异色子变色;
                        i--;
                        j--;
                    }
                }
                else if (!chessBox[i][j]) return;//末尾为空白,不变色;
            }
            //改变颜色;
            function change(i, j) {
                oneStep(i, j, me);
                m++;
            }
            changeChessLeftUp(i, j);
            changeChessUp(i, j);
            changeChessRightUp(i, j);
            changeChessLeft(i, j);
            changeChessRight(i, j);
            changeChessLeftDown(i, j);
            changeChessDown(i, j);
            changeChessRightDown(i, j);
            if (m == 0) {
                alert("???");//未翻转棋子则该步非法;
            }
            else {
                oneStep(p, q, me);
                me = !me;//黑白棋交替;
            }
        }
        //点击区域进行绘制棋子;
        chess.onclick = function (e) {
            cleanPrompt();
            var x = e.offsetX;
            var y = e.offsetY;
            var i = Math.floor((x - 10) / 60);
            var j = Math.floor((y - 10) / 60);//将从画布得到的位置信息对应为（0,0)到（7,7)的数组;
            if (chessBox[i][j] == 0) {
                changeChess(i, j);
                totalChess();
                showPrompt();
            }
        }
        //触发提示;
        function showPrompt() {
            n = 0;//初始化n;
            //按顺序依次判断每个位置能否落子,能落子给出提示;
            for (var i = 0; i < 8; i++) {
                for (var j = 0; j < 8; j++) {
                    if (chessBox[i][j] == 0) {
                        judgeChess(i, j);
                    }
                    else continue;
                }
            }
            if (!n) {
                alert("别玩了你报告没写");//n为0表示无子可走,给出失败提示;
            }
        }
    </script>

</body>
</html>